<!--
 * @description: 
 * @Author: FengKongLi
 * @Date: 2022-08-01 09:28:26
 * @LastEditors: FengKongLi
 * @LastEditTime: 2022-08-04 15:41:05
-->
<template>
  <div class="property-query">
    <secen-view @already="already"></secen-view>
    <div id="toolbar" class="tool-bar">
      <label style="font: 400 13.3333px Arial">SQL</label
      ><input type="text" id="SQL" :value="inputValue" />
      <button
        type="button"
        id="search"
        class="button black"
        @click="handlerQuery"
      >
        查询
      </button>
      <br />
      <select
        v-model="value"
        id="position"
        class="select-con"
        @change="handlerChange(value)"
      >
        <option value="1">定位点1</option>
        <option value="2">定位点2</option>
        <option value="3">定位点3</option>
        <option value="4">点位点4</option>
      </select>
    </div>
    <div id="bubble" class="bubble">
      <div id="tools" style="text-align: right">
        <span
          class="fui-cross"
          title="关闭"
          id="close"
          style="color: darkgrey; padding: 5px"
        ></span>
      </div>
      <div style="overflow-y: scroll; height: 150px" id="tableContainer">
        <table id="tab"></table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PropertyQuery",
  data() {
    return {
      viewer: "",
      value: "1",
      camera: "",
      scene: "",
      widget: "",
      //建筑图层
      buildingLayer: "",
      IDs: [],
      inputValue: "SMAREA>500",
    };
  },
  mounted() {},
  methods: {
    already(viewer) {
      this.viewer = viewer;
      this.scene = this.viewer.scene;
      this.camera = this.scene.camera;
      //设置相机位置、视角，便于观察场景
      this.scene.camera.setView({
        destination: new Cesium.Cartesian3.fromDegrees(
          116.4566,
          39.9149,
          5323.4459
        ),
        orientation: {
          heading: Cesium.Math.toRadians(90.0),
          pitch: Cesium.Math.toRadians(-45),
          roll: 0.0,
        },
      });
      this.scene.shadowMap.darkness = 1.275; //设置第二重烘焙纹理的效果（明暗程度）
      this.scene.skyAtmosphere.brightnessShift = 0.4; //修改大气的亮度
      // 显示帧速(FPS)
      this.scene.debugShowFramesPerSecond = false;
      // 当前场景是否开启hdr。  Default Value: false
      this.scene.hdrEnabled = false;
      // 是否显示太阳
      this.scene.sun.show = true;
      // 设置环境光的强度-新处理CBD场景
      // this.scene.lightSource获取当前场景中的光源；ambientLightColor获取或设置环境光颜色。
      this.scene.lightSource.ambientLightColor = new Cesium.Color(
        0.65,
        0.65,
        0.65,
        1
      );
      // 光源位置
      let position1 = new Cesium.Cartesian3.fromDegrees(
        116.261209157595,
        39.3042238956531,
        480
      );
      //光源目标位置，决定平行光方向
      let targetPosition1 = new Cesium.Cartesian3.fromDegrees(
        116.261209157595,
        39.3042238956531,
        430
      );
      // 可选项{目标位置，光源颜色，光强度}
      let dirLightOptions = {
        targetPosition: targetPosition1,
        color: new Cesium.Color(1.0, 1.0, 1.0, 1),
        intensity: 0.55,
      };
      // new Cesium.DirectionalLight(position, options)
      // DirectionalLight平行光源 ，两个参数，光源位置；可选项；
      let directionalLight_1 = new Cesium.DirectionalLight(
        position1,
        dirLightOptions
      );
      // 添加光源
      this.scene.addLightSource(directionalLight_1);
      this.widget = viewer.cesiumWidget;
      this.handlerOpenLayers();
    },
    handlerOpenLayers() {
      try {
        // 打开iserver场景服务下所有图层
        // CBD场景
        let SCENE_CBD =
          "http://www.supermapol.com/realspace/services/3D-CBD/rest/realspace";
        var promise = this.scene.open(SCENE_CBD);
        let that = this;
        Cesium.when(
          promise,
          function () {
            that.buildingLayer = that.scene.layers.find("Building@CBD");
            that.buildingLayer.indexedDBSetting.isAttributesSave = true; //保存属性
            //点击属性查询
            let handler = new Cesium.ScreenSpaceEventHandler(that.scene.canvas);
            handler.setInputAction(function (evt) {
              let position = that.scene.pickPosition(evt.position);
              if (that.buildingLayer.getSelection().length > 0) {
                const selectedId = Number(that.buildingLayer.getSelection()[0]);
                that.buildingLayer
                  .getAttributesById([selectedId])
                  .then(function (atts) {
                    if (atts) {
                      that.viewer.entities.removeAll();
                      let length = Object.keys(atts).length;
                      let des;
                      for (let i = 0; i < length; i++) {
                        let key = Object.keys(atts)[i];
                        let value = atts[key];
                        if (i == 0) {
                          des =
                            '<table class="cesium-infoBox-defaultTable"><tbody>' +
                            "<tr><th>" +
                            key +
                            "</th><td>" +
                            value +
                            "</td></tr>";
                        } else if (i == length - 1) {
                          des +=
                            "<tr><th>" +
                            key +
                            "</th><td>" +
                            value +
                            "</td></tr>" +
                            "</tbody></table>";
                        } else {
                          des +=
                            "<tr><th>" +
                            key +
                            "</th><td>" +
                            value +
                            "</td></tr>";
                        }
                      }

                      that.viewer.entities.add({
                        position: position,
                        billboard: {
                          image: "./data/images/location4.png",
                          width: 30,
                          height: 40,
                        },
                        name: atts["MODELNAME"],
                        description: des,
                      });
                    }
                  });
              }
            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
          },
          function (e) {
            var title = "加载SCP失败，请检查网络连接状态或者url地址是否正确？";
            this.widget.showErrorPanel(title, undefined, e);
          }
        );
      } catch (e) {
        if (this.widget._showRenderLoopErrors) {
          var title = "渲染时发生错误，已停止渲染。";
          this.widget.showErrorPanel(title, undefined, e);
        }
      }
    },
    handlerQuery() {
      console.log("dianjil");
      let that = this;
      let sqlParameter = {
        datasetNames: ["二维数据:Building"],
        getFeatureMode: "SQL",
        queryParameter: {
          attributeFilter: this.inputValue,
        },
      };
      let url =
        "http://www.supermapol.com/realspace/services/data-cbd/rest/data/featureResults.rjson?returnContent=true";
      let queryData = JSON.stringify(sqlParameter);
      this.$axios
        .post(url, queryData)
        .then(function (result) {
          // console.log(result);
          // let resultObj = JSON.parse(result);
          // console.log(resultObj);
          let resultObj = result.data;
          if (resultObj.featureCount > 0) {
            that.onQueryComplete(resultObj.features);
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    handlerChange(value) {
      switch (value) {
        case "1":
          this.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(
              116.45756824765414,
              39.9151525065,
              303.9282348283207
            ),
            orientation: {
              heading: 3.361386,
              pitch: -0.543285,
              roll: 6.283185307179563,
            },
          });
          break;
        case "2":
          this.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(
              116.45898554643348,
              39.90943026228571,
              32.707476595524625
            ),
            orientation: {
              heading: 6.016771,
              pitch: -0.300416,
              roll: 0.0,
            },
          });
          break;
        case "3":
          this.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(
              116.43518565219966,
              39.95097107746538,
              2078.0503226706123
            ),
            orientation: {
              heading: 2.718565,
              pitch: -0.415366,
              roll: 0.0,
            },
          });
          break;
        case "4":
          this.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(
              116.48368313561016,
              39.911532190450295,
              369.08993153401934
            ),
            orientation: {
              heading: 4.771817,
              pitch: -0.190922,
              roll: 0.0,
            },
          });
          break;

        default:
          break;
      }
    },
    onQueryComplete(features) {
      let selectedFeatures = features;
      this.viewer.entities.removeAll();
      for (let i = 0; i < selectedFeatures.length; i++) {
        let value = selectedFeatures[i].fieldValues["0"];
        let feature = selectedFeatures[i];
        for (let j = 0; j < feature.fieldNames.length; j++) {
          let index = j.toString();
          if (j == 0) {
            var des =
              '<table class="cesium-infoBox-defaultTable"><tbody>' +
              "<tr><th>" +
              selectedFeatures[i].fieldNames["0"] +
              "</th><td>" +
              selectedFeatures[i].fieldValues["0"] +
              "</td></tr>";
          } else if (j == feature.fieldNames.length - 1) {
            des +=
              "<tr><th>" +
              selectedFeatures[i].fieldNames[index] +
              "</th><td>" +
              selectedFeatures[i].fieldValues[index] +
              "</td></tr>" +
              "</tbody></table>";
          } else {
            des +=
              "<tr><th>" +
              selectedFeatures[i].fieldNames[index] +
              "</th><td>" +
              selectedFeatures[i].fieldValues[index] +
              "</td></tr>";
          }
        }
        this.viewer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(
            parseFloat(selectedFeatures[i].fieldValues["12"]),
            parseFloat(selectedFeatures[i].fieldValues["13"]),
            parseFloat(selectedFeatures[i].fieldValues["16"])
          ),
          billboard: {
            image: "./data/images/location4.png",
            width: 30,
            height: 40,
          },
          name: selectedFeatures[i].fieldValues["11"],
          description: des,
        });
        this.IDs.push(parseInt(value) + 11);
      }
      if (this.IDs.length > 0) {
        this.buildingLayer.setSelection(this.IDs);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.property-query {
  position: relative;
  .tool-bar {
    position: absolute;
    top: 1rem;
    background-color: #636060;
    padding: 0.5rem;
    color: white;
    input[type="text"] {
      text-align: center;
      z-index: 3;
      height: 18px;
      background: none;
      border: none;
      padding: 5px 0;
      -webkit-transition: 0.3s;
      transition: 0.3s;
      border-bottom: 2px solid #b8b2b2;
      color: aliceblue;
    }
    .select-con {
      width: 100%;
      margin-top: 1rem;
    }
  }
}
</style>
